<template>
  <div class="i_frame">
    <div class="box">
      <div class="tab_bar">
        <div class="tab_item active">视频动态</div>
        <div class="tab_item">直播</div>
        <div class="tab_item">专栏</div>
      </div>
      <div class="container">
        <div class="video_tab">
          <div class="video_list">
            <div class="tip_box no_more_tip">暂时没有新动态哦！</div>
            <div class="split_line">
              <div class="history_tip">历史动态</div>
            </div>
            <template v-for="item in dynamicList">
              <list-item :dynamic="item"></list-item>
            </template>
            <div class="more_tab">
              <div class="more_btn">查看全部</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ListItem from "./component/dynamic_list.vue";
export default {
  components: {
    ListItem,
  },
  data() {
    return {
      dynamicList: [
        {
          uid: "10330740",
          uname: "观察者网",
          utype: "1",
          vip: true,
          avatar: "/static/dynamic/video/avatar/1.webp",
          content: "美军已将南海坠毁F-35残骸打捞出水",
          poster: "/static/dynamic/video/poster/1.webp",
          publishTime: "2022-03-04 16:23:00",
          watchLater: false,
          videoId: "BV1BT4y1S7na",
        },
        {
          uid: "348630592",
          uname: "十分绘画",
          utype: "0",
          vip: true,
          avatar: "/static/dynamic/video/avatar/2.webp",
          content: "教你画笑笑笑笑笑笑笑笑笑笑脸",
          poster: "/static/dynamic/video/poster/2.webp",
          publishTime: "2022-03-04 15:23:00",
          watchLater: false,
          videoId: "BV13Z4y1C72d",
        },
        {
          uid: "442229",
          uname: "不搞博士Dcy",
          utype: "0",
          vip: true,
          avatar: "/static/dynamic/video/avatar/3.webp",
          content: "水  母  盾  原  产  地",
          poster: "/static/dynamic/video/poster/3.webp",
          publishTime: "2022-03-04 14:23:00",
          watchLater: false,
          videoId: "BV1vS4y1679o",
        },
        {
          uid: "393314780",
          uname: "鄂东老男孩",
          utype: "0",
          vip: true,
          avatar: "/static/dynamic/video/avatar/4.webp",
          content:
            "有人不信这个季节有橙子，老男孩去采摘现场，也看一下三峡的美景",
          poster: "/static/dynamic/video/poster/4.webp",
          publishTime: "2022-03-04 13:23:00",
          watchLater: false,
          videoId: "BV1ML4y137yH",
        },
        {
          uid: "1688563568",
          uname: "插画家斋藤直葵",
          utype: "0",
          vip: true,
          avatar: "/static/dynamic/video/avatar/5.webp",
          content: "【即兴改画84】如何让人物更真实感？你可以这么做…",
          poster: "/static/dynamic/video/poster/5.webp",
          publishTime: "2022-03-04 12:23:00",
          watchLater: false,
          videoId: "BV1CU4y1Z7Cv",
        },
        {
          uid: "386052949",
          uname: "懒人读漫画",
          utype: null,
          vip: false,
          avatar: "/static/dynamic/video/avatar/6.webp",
          content: "【彩色版】电锯人21-25漫画 精华速读",
          poster: "/static/dynamic/video/poster/6.webp",
          publishTime: "2022-03-04 11:23:00",
          watchLater: false,
          videoId: "BV13a411h7Md",
        },
        {
          uid: "11253297",
          uname: "多多poi丶",
          utype: "0",
          vip: true,
          avatar: "/static/dynamic/video/avatar/7.webp",
          content: "【多多poi】伴雪 - 原创曲",
          poster: "/static/dynamic/video/poster/7.webp",
          publishTime: "2022-03-04 10:23:00",
          watchLater: false,
          videoId: "BV16S4y167Fw",
        },
        {
          uid: "480179246",
          uname: "纸代棗-やすゆきOfficial",
          utype: null,
          vip: true,
          avatar: "/static/dynamic/video/avatar/8.webp",
          content: "【紙代なつめ】睡眠导入。",
          poster: "/static/dynamic/video/poster/8.webp",
          publishTime: "2022-03-04 10:23:00",
          watchLater: false,
          videoId: "BV1LS4y167MX",
        },
        {
          uid: "401742377",
          uname: "原神",
          utype: "1",
          vip: true,
          avatar: "/static/dynamic/video/avatar/9.webp",
          content: "《原神》EP - 浮岳映虹之波",
          poster: "/static/dynamic/video/poster/9.webp",
          publishTime: "2022-03-04 10:23:00",
          watchLater: false,
          videoId: "BV1ML411N7hm",
        },
        {
          uid: "1734978373",
          uname: "小柔Channel",
          utype: "0",
          vip: true,
          avatar: "/static/dynamic/video/avatar/10.webp",
          content: "虎视眈眈，一首不敢在直播唱的歌【生唱】",
          poster: "/static/dynamic/video/poster/10.webp",
          publishTime: "2022-03-03 10:23:00",
          watchLater: false,
          videoId: "BV1Cm4y1R7Mf",
        },
      ],
    };
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
}
.i_frame {
  position: absolute;
  left: calc(50% - 175px);
  width: 350px;
  // height: 540px;
  border-radius: 2px;
  padding-top: 12px;
}
.box {
  background-color: #fff;
  box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /deep/ a {
    color: #212121;
    text-decoration: none;
  }
  .tab_bar {
    font-size: 12px;
    color: #999;
    line-height: 15px;
    height: 45px;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 19px;
    border-bottom: 1px solid #e7e7e7;
    user-select: none;
    box-sizing: border-box;
    .tab_item {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 11px;
      margin-right: 23px;
      cursor: pointer;
      transition: all 0.3 ease;
      z-index: 1;
      &.active {
        background-color: #00a1d6;
        color: #fff;
        padding: 4px 10px;
        margin: 0 13px 0 -9px;
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
  .container {
    min-height: 114px;
    max-height: 445px;
    overflow: auto;
    overscroll-behavior: none;
    .video_tab {
      .video_list {
        padding-top: 11px;
        .tip_box {
          height: 95px;
          color: #999;
          font-size: 13px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .split_line {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #999;
          font-size: 13px;
          margin: 0 19px;
          &::before {
            content: "";
            position: absolute;
            display: block;
            width: 100%;
            border-top: 1px solid #e7e7e7;
            top: 14px;
            left: 0;
          }
          .history_tip {
            background-color: #fff;
            padding: 0 9px;
            z-index: 1;
          }
        }
        .more_tab {
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 19px;
          .more_btn {
            height: 30px;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #212121;
            font-size: 13px;
            background-color: #f4f4f4;
            cursor: pointer;
            &:hover {
              background-color: #e7e7e7;
            }
          }
        }
      }
    }
  }
}
/deep/ .verify_box {
  width: 15px;
  height: 15px;
  background-color: #fff;
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 20px;
  right: 0;
  border-radius: 50%;
}
/deep/ .verify_box.type_big {
  background-image: url("/static/icon/type/type_big.svg");
}
/deep/ .verify_box.type_1 {
  background-image: url("/static/icon/type/type_1.svg");
}
/deep/ .verify_box.type_0 {
  background-image: url("/static/icon/type/type_0.svg");
}
</style>